<template>
  <button @click="saveChartDesignerData" style="margin-right: 50px">保存</button>
  <el-text>本样例代码演示：1.对BI模板编辑   2.保存BI模板数据   3.预先加载商品销售 商品季度销售 外部数据集</el-text>
  <div id="chartDesigner2_2" style="width: 100%; height: 100%"></div>
</template>
<script setup>
import {onMounted} from 'vue';
import {_} from "lodash";
import jdxsOnUpdateData_2_2 from "@/views/chartDesigner/spjdxsResultsResponse_data_2_2.js";
import qyxsOnUpdateData_2_2 from "@/views/chartDesigner/spqyxsResultsResponse_data_2_2.js";
import onUpdateDatasetlist_rtn_2_2 from "@/views/chartDesigner/ChartDesigner_2_2_onupdatedatasetlist.js";
import {queryonUpdateDataFrom} from "@/utils/onUpdateDataUtils.js";
import axios from "axios";
let ond1=[jdxsOnUpdateData_2_2]
let ond2=[qyxsOnUpdateData_2_2]
let ond3 =_.concat(ond1,ond2);


//预先提供：以外部数据源的方式，动态请求来提供‘候选数据集列表’
function onUpdateDatasetList() {
  return new Promise((resolve, reject) => {
    resolve(onUpdateDatasetlist_rtn_2_2);

  })
}

function onUpdateData(datasets, params) {
  return new Promise((resolve, reject) => {
    resolve(queryonUpdateDataFrom(datasets, params, ond3));
  })

}

let option = { //参数配置说明 根据您的需求填写option
  uploadImage: { //上传图片相关信息 如果不传该字段时，设计器用到的所有上传图片配置项均不显示。
    server: "url",//上传图片地址
    method: "post",//上传图片请求方式
    headers: { //上传图片请求头
      "Authorization": "Token XXXXXXXX"
    },
    fieldName: "file",
    resultField: "file"
  },
  pageData: { //画布初始化时的宽高
    width: '1920px',
    height: '1080px'
  },
  dataSet: [ //数据集按钮的方式
    { //Json数据
      id: 1,
      value: "新建Json数据集"
    },
    { //http请求数据
      id: 2,
      value: "新建Http接口数据集"
    },
    { //API服务数据
      id: 3,
      value: "API服务数据集"
    },
    {
      id: 4,
      value: "外部数据集"  //  新建一个新的报表实例，如果希望可以预先动态从后台提供几个数据集供其使用，这个配置必须有；
      // 然后只要动态的从后台拿到n个数据集，全部用 results格式装配，onUpdateDatasetList方法来触发
    }
  ]
}


option.onUpdateDatasetList = onUpdateDatasetList
option.onUpdateData = onUpdateData

let designer;
let report;

onMounted(async () => {
  await fetchChartDesignerInstance();

})

function saveChartDesignerData() {

  console.log("...chartdesigner_2_2.vue....designer.getSaveData:",designer.getSaveData())
  console.log("....chartdesigner_2_2.vue.....designer.getSaveData().config:",designer.getSaveData().config)
  console.log("....chartdesigner_2_2.vue.....designer.getSaveData().data.dataConfig:",designer.getSaveData().data.dataConfig);
}
function fetchChartDesignerInstance(){
  axios({
    method: "post",
    url: "/api/xzchartdesigner/report2/report",
    data: {
      reportType: "chartDesigner",
      reportId: 'report2',
    }
  }).then((response) => {
    report = response.data.data.report;
    designer = new XZChartDesigner("#chartDesigner2_2", option, report);

  }).catch((error) => {

    console.log('onMounted->axios->error',error);
  })
}

</script>
<style scoped>

</style>
